<template>
  <view class="container">

    <!-- 工单信息卡片（可选） -->
   <!-- <view class="order-card" v-if="order">
      <view class="order-header">
        <view class="order-type">
          <view class="dot" :style="{ background: order.color || '#4095E5' }"></view>
          <text class="order-title">{{ order.repair_type }}</text>
        </view>
        <view class="order-status status-done">已完成</view>
      </view>
      <view class="order-info">
        <view class="info-row"><text class="info-row-bold">报修人：</text>{{ order.sub_name }}</view>
        <view class="info-row"><text class="info-row-bold">报修时间：</text>{{ order.sub_date }}</view>
        <view class="info-row"><text class="info-row-bold">报修地点：</text>{{ order.repair_address }}</view>
        <view class="info-row"><text class="info-row-bold">报修内容：</text>{{ order.repair_content }}</view>
      </view>
    </view> -->

    <!-- 评价卡片 -->
    <view class="comment-card">
      <view class="comment-title">请为本次维修服务评分</view>
      <view class="star-container">
        <text class="star"
              v-for="i in 5"
              :key="i"
              :class="{ active: i <= qualityRating }"
              @click="setRating(i)">
          {{ i <= qualityRating ? '★' : '☆' }}
        </text>
        <text class="comment-score">{{ qualityRating }}分</text>
      </view>
      <textarea class="comment-input" v-model="feedbackContent" placeholder="请填写您的评价（必填）" maxlength="100" />
      <view class="input-tip">{{ feedbackContent.length }}/100</view>
      <button class="btn-primary submit-btn" @click="submitComment">提交评价</button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import {usePublicStore} from '../../../store/public'

const qualityRating = ref(0)
const feedbackContent = ref('')
const order = ref(null)
const isLoading = ref(true)
const isSubmitted = ref(false)
const app =getApp();
const userInfo =usePublicStore();


const setRating = (val) => {
  qualityRating.value = val
}

const insert_commont = ()=>{
		const baseUrl = app.globalData.baseUrl;
			uni.request({
			    url: encodeURI(baseUrl + '/feedback/insert'),
				method:'POST',
			    data: {
					"userId" : userInfo.getUserInfo().id,
					"orderId": order.value.repair_id,
					"feedbackType":"表扬",
					"feedbackContent":feedbackContent.value,
					"qualityRating":qualityRating.value,
					"status":"已解决"
			    },
			    header:{
					"X-Tenant-Id": uni.getStorageSync("tenantId"),
					"token" : uni.getStorageSync("token")
				},
			    success: (res) => {
					console.log(res.data)
					order.value = res.data.data
			    }
			});
	
		}


const submitComment = () => {
  if (qualityRating.value === 0) {
    uni.showToast({ title: '请为服务打分', icon: 'none' })
    return
  }
  if (!feedbackContent.value.trim()) {
    uni.showToast({ title: '请填写评价内容', icon: 'none' })
    return
  }
  
  insert_commont();
  // 这里可以提交到后端，或本地模拟保存
  uni.showToast({ title: '评价提交成功', icon: 'success' })
  setTimeout(() => {
    uni.navigateBack()
  }, 1200)
}


// 获取页面参数，加载工单信息
onLoad((options) => {
  order.value = uni.getStorageSync('order') || [];
  uni.removeStorageSync('order');
})
</script>

<style scoped>
.container {
  background: #EFEFEF;
  min-height: 100vh;
  padding: 1rpx 16rpx 100rpx 16rpx;
}
.order-card {
  background: #fff;
  border-radius: 24rpx;
  box-shadow: 0 4rpx 16rpx #eee;
  margin: 24rpx 14rpx 0 14rpx;
  padding: 28rpx;
}
.order-header {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
}
.order-type {
  display: flex;
  align-items: center;
  flex: 1;
}
.dot {
  width: 24rpx;
  height: 24rpx;
  border-radius: 50%;
  margin-right: 12rpx;
}
.order-title {
  font-weight: bold;
  font-size: 34rpx;
}
.order-status {
  padding: 4rpx 20rpx;
  border-radius: 24rpx;
  font-size: 26rpx;
  margin-right: 16rpx;
}
.status-done {
  background: #DCFCE7;
  color: #337541;
}
.order-info {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 8rpx;
}
.info-row {
  margin-bottom: 4rpx;
  color: #BEBEBE;
  margin-left: 34rpx;
}
.info-row-bold {
  font-weight: bold;
}
.comment-card {
  background: #fff;
  border-radius: 24rpx;
  box-shadow: 0 4rpx 16rpx #eee;
  margin: 32rpx 14rpx 0 14rpx;
  padding: 32rpx 28rpx 40rpx 28rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.comment-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #209CA3;
  margin-bottom: 24rpx;
}
.star-container {
  display: flex;
  align-items: center;
  margin-bottom: 24rpx;
}
.star {
  color: #FFD700;
  font-size: 48rpx;
  margin-right: 10rpx;
  cursor: pointer;
  transition: transform 0.1s;
}
.star.active {
  transform: scale(1.2);
}
.comment-score {
  color: #9A9A9A;
  font-size: 28rpx;
  margin-left: 16rpx;
}
.comment-input {
  width: 580rpx;
  height: 150rpx;
  border-radius: 12rpx;
  border: 2rpx solid #B6F4D8;
  padding: 18rpx 20rpx;
  font-size: 30rpx;
  margin-bottom: 8rpx;
  background: #F8F8F8;
  color: #333;
  resize: none;
}
.input-tip {
  align-self: flex-end;
  color: #9A9A9A;
  font-size: 24rpx;
  margin-bottom: 16rpx;
}
.submit-btn {
  background: #209CA3;
  color: #fff;
  font-size: 32rpx;
  border-radius: 12rpx;
  padding: 16rpx 0;
  width: 100%;
  margin-top: 12rpx;
  font-weight: bold;
  box-shadow: 0 2rpx 8rpx #B6F4D8;
}
</style>